<ui:composition template="/WEB-INF/templates/login-template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<ui:define name="menu"></ui:define>
	<ui:define name="submenu"></ui:define>
	<ui:define name="sidebar">
		<ui:include src="/WEB-INF/templates/public-sidebar.xhtml" />
	</ui:define>
	<ui:define name="content">


		<h:form id="miscExpensesForm">
			<p:growl />

			

			<h:panelGrid id="printPage">
				<h:outputText value="Miscellaneous Expense Claim"
				styleClass="outputTextTitle" />
			
			<p:panel header="Employee Details">
				<h:panelGrid columns="6" cellspacing="4"
					columnClasses="employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText, employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText">

					<h:outputLabel value="Expense Code" />
					<h:outputLabel value=":" />
					<h:outputLabel
						value="#{viewMiscReimbursementBean.miscExpense.miscExpenseCode}" />


					<h:outputLabel value="#{msg['employeename.label']}" />
					<h:outputLabel value=":" />
					<h:outputLabel
						value="#{viewMiscReimbursementBean.miscExpense.employee.firstName} #{viewMiscReimbursementBean.miscExpense.employee.lastName}" />

					<h:outputLabel value="Employee Code" />
					<h:outputLabel value=":" />
					<h:outputLabel
						value="#{viewMiscReimbursementBean.miscExpense.employee.employeeCode}" />

					<h:outputLabel value="#{msg['place.label']}" />
					<h:outputLabel value=":" />
					<h:outputLabel
						value="#{viewMiscReimbursementBean.miscExpense.employee.location}" />

					<h:outputLabel value="#{msg['requestdate.label']}" />
					<h:outputLabel value=":" />
					<h:outputLabel
						value="#{viewMiscReimbursementBean.miscExpense.requestDate}">
						<f:convertDateTime pattern="dd-MMM-yyyy HH:mm a" timeZone="#{viewMiscReimbursementBean.timeZone}" />
					</h:outputLabel>

					<h:outputLabel value="#{msg['dept.label']}" />
					<h:outputLabel value=":" />
					<h:outputLabel
						value="#{viewMiscReimbursementBean.miscExpense.employee.moduleName}" />

					<h:outputLabel value="#{msg['designation.label']}" />
					<h:outputLabel value=":" />
					<h:outputLabel
						value="#{viewMiscReimbursementBean.miscExpense.employee.designation}" />

				</h:panelGrid>

				<h:outputText value="Expense Details"
					styleClass="outputTextSubTitle" />
				<h:panelGrid columns="3" cellspacing="4"
					columnClasses="employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText">

					<h:outputLabel value="#{msg['purpose.label']}" />
					<h:outputLabel value=":" />
					<h:outputLabel
						value="#{viewMiscReimbursementBean.miscExpense.expensePurpose}"
						readonly="true" />

					<h:outputLabel value="#{msg['location.label']}" />
					<h:outputLabel value=":" />
					<h:outputLabel
						value="#{viewMiscReimbursementBean.miscExpense.expenseLocation}"
						readonly="true" />


				</h:panelGrid>

				<h:outputText value="#{msg['miscellaneousexpensessubtitle.label']}"
					styleClass="outputTextSubTitle" />
				<p:dataTable id="mixcexpensesdetails"
					value="#{viewMiscReimbursementBean.miscExpensesDetailsList}"
					var="miscExpenseDetails">

					<p:column style="width:100px">
						<f:facet name="header">
							<h:outputText value="#{msg['date.label']}" />
						</f:facet>
						<h:outputText value="#{miscExpenseDetails.billDate}">
							<f:convertDateTime pattern="dd-MMM-yyyy" timeZone="#{viewMiscReimbursementBean.timeZone}"/>
						</h:outputText>
					</p:column>

					<p:column style="width:100px">
						<f:facet name="header">
							<h:outputText value="#{msg['billmode.label']}" />
						</f:facet>
						<h:outputText value="#{miscExpenseDetails.billDesc}" />
					</p:column>
					<p:column style="width:100px">
						<f:facet name="header">
							<h:outputText value="#{msg['billno.label']}" />
						</f:facet>
						<h:outputText value="#{miscExpenseDetails.billNo}" />
					</p:column>
					<p:column style="width:100px">
						<f:facet name="header">
							<h:outputText value="Amount" />
						</f:facet>
						<h:outputText value="#{miscExpenseDetails.amount}" />
					</p:column>
					<p:column style="width:100px">
						<f:facet name="header">
							<h:outputText value="Currency" />
						</f:facet>
						<h:outputText value="#{miscExpenseDetails.currency}" />
					</p:column>
					<p:column style="width:100px">
						<f:facet name="header">
							<h:outputText value="#{msg['billattached.label']}" />
						</f:facet>
						<h:outputText value="#{miscExpenseDetails.billAttached}" />
					</p:column>
					<!-- <p:column style="width:100px">  
                <f:facet name="header">  
                    <h:outputText value="#{msg['adindicator.label']}" />  
                </f:facet>  
                <h:outputText value="#{miscExpenseDetails.ad}"/>  
            </p:column>
             -->


				</p:dataTable>


				<br />
				<h:outputText value="Expenses report summary total"
					styleClass="outputTextSubTitle" />
				<p:dataTable value="#{viewMiscReimbursementBean.currencies}"
					var="currency">

					<p:column headerText="Amount">
						<h:outputText value="#{currency.amount}" />
					</p:column>
					<p:column headerText="Currency">
						<h:outputText value="#{currency.currency}" />
					</p:column>
				</p:dataTable>
				<br />
				<h:outputText value="Disbursement Summary"
					styleClass="outputTextSubTitle" />
				<h:panelGrid columns="3" cellspacing="4" style="width: 100%;"
						columnClasses="textGridCell, gridCellBottomCenterAligned, gridCellBottomRightAligned"> 
						
						<h:panelGrid columns="2" style="" columnClasses="textGridCell, textGridCell, textGridCell">
							<h:outputText value="Advance Taken:" /><br />
							<p:inputText
								value="#{viewMiscReimbursementBean.miscExpense.advanceTakenAmount}"
								readonly="true" />
							<h:outputText
							value="#{viewMiscReimbursementBean.miscExpense.advanceTakenCurrency}"
							readonly="true" />
						</h:panelGrid>
						
						<h:panelGrid columns="2" style="margin: 0 auto;" columnClasses="textGridCell, textGridCell, textGridCell">						
							<h:outputText value="#{msg['approvaltotal.label']}:" /><p:spacer></p:spacer>
							<p:inputText readonly="true"
								value="#{viewMiscReimbursementBean.miscExpense.approvedAmount}">
								
							</p:inputText>
							<h:outputText
							value="#{viewMiscReimbursementBean.miscExpense.approvedCurrency}" />
						</h:panelGrid>				
						
						
						<h:panelGrid columns="1" style="float: right;" columnClasses="textGridCell, textGridCell, textGridCell">
							<h:outputText
								value="#{msg['balanceamountpayble/receivable.label']}:" />
							
							<h:panelGroup>
							<p:inputText
								value="#{viewMiscReimbursementBean.miscExpense.balancepayableAmount}"
								readonly="true" id="balancePay" />
							<h:outputText
								value="#{viewMiscReimbursementBean.miscExpense.balancePayableCurrency}" />
							</h:panelGroup>
						</h:panelGrid>
					</h:panelGrid>


				<h:panelGrid cellspacing="7">

					<h:outputText
						value="Approver Status : #{viewMiscReimbursementBean.miscExpense.expenseStatus}"
						style="font-weight:bold;" />
					<h:panelGroup>
						<h:outputText value="Approver Comments :"
							style="font-weight:bold;" />
						<font face="comic sans MS, new york, times" size="2"><b>
								#{viewMiscReimbursementBean.miscExpense.approvalComment}</b></font>
					</h:panelGroup>
				</h:panelGrid>



</p:panel>
			</h:panelGrid>
			
			<h:panelGroup style="float:right;">
				<p:commandButton value="Print" type="button" icon="ui-icon-print">
					<p:printer target="printPage" />
				</p:commandButton>
				<p:commandButton value="Back" onclick="history.back();" />
			</h:panelGroup>


		</h:form>

	</ui:define>
</ui:composition>

